import React, { useState, useEffect, useImperativeHandle, forwardRef, Ref } from 'react'
import { Modal, Form, Checkbox, Input, message } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import FeedbackModel from '../../models/feedbackModel'

export interface FeedbackRefInterface {
  show: Function
}

interface PropsInterface extends FormComponentProps {
}

const ComFeedback = function (props: PropsInterface, ref: Ref<any>) {

  const { getFieldDecorator, validateFields } = props.form;
  const [visible, setVisible] = useState(false)

  const show = () => {
    setVisible(true)
    props.form.resetFields();
  }

  useImperativeHandle<any, FeedbackRefInterface>(ref, () => ({
    show: () => {
      show()
    },
  }));

  const okClick = () => {
    validateFields((errors, values) => {
      if (!errors) {
        FeedbackModel.add(values).then(() => {
          message.success('添加成功')
          setVisible(false)
        }).catch(() => {})
      }
    })
  }


  return (
    <Modal
      title="提交反馈"
      visible={visible}
      onOk={okClick}
      onCancel={() => setVisible(false)}
    >
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        <Form.Item label="名称">
          {getFieldDecorator('name', {
            rules: [
              {
                required: true,
                message: '请输入名称',
              },
              {
                max: 20,
                message: '不能超过20个字符',
              },
            ],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="手机号">
          {getFieldDecorator('phone', {
          })(<Input />)}
        </Form.Item>
        <Form.Item label="QQ">
          {getFieldDecorator('qq', {
          })(<Input />)}
        </Form.Item>
        <Form.Item label="微信">
          {getFieldDecorator('wx', {
          })(<Input />)}
        </Form.Item>
        <Form.Item label="内容">
          {getFieldDecorator('content', {
            rules: [
              {
                required: true,
                message: '请输入内容',
              },
              {
                max: 140,
                message: '不能超过14个字符',
              },
            ],
          })(<Input.TextArea />)}
        </Form.Item>
        <Form.Item label="是否显示">
          {getFieldDecorator('isShow', {
            valuePropName: 'checked',
          })(
            <Checkbox>
            </Checkbox>,
          )}
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default Form.create<PropsInterface>()(forwardRef(ComFeedback));